<template>
    <div class="car-boxes" id="swap_box">
        <div class="car-box j-col">
            <div class="t-head d-flex align-center">
                <img src="~@/assets/up-onchain.png" class="j-img" />
                <div class="m-tip1 c-title-2">
                    <!-- 最大涨幅 -->
                    {{ $t("message.DateAlter.b") }}
                </div>
            </div>
            <div class="tds-row tds-hd sm d-flex justify-space-between align-center">
                <div class="ts ts-1 c-title-5">
                    <!-- 幣種 -->
                    <span class="t-tit">{{ $t("message.Rank.c") }}</span>
                </div>
                <div class="ts ts-3 c-title-5">
                    <!-- 漲跌幅 -->
                    {{ $t("message.Rank.oo") }}
                </div>
            </div>
            <div v-if="bigUp.length > 0">
                <swiper :modules="modules" :slides-per-view="1" :loop="true"
                :autoplay="{ delay: 4000, disableOnInteraction: false }"
                :pagination="{ clickable: true }"
                    :space-between="30" @slideChange="(e) => onSlideChange(e, 'bigUp')">
                    <swiper-slide v-for="(big, bindex) in bigUp" :key="bindex">
                        <div class="tds d-flex justify-space-between align-center"
                            v-for="(item, binde) in bigUp[bindex]" :key="binde">
                            <div class="ts ts-1 d-flex align-center justify-space-between c-title-4"
                                @click="onDetail(item.baseToken)">
                                <span class="c-title-4">{{ binde + (bindex * bigUp[bigUpIndex].length) + 1 }}</span>
                                <img :src="getImg(item.symbol)" alt="chainingview" class="j-ico seo-font" @error="loadErr"/>
                                <span class="b-txt c-title-4">
                                    <span class="name">{{ item.name }}</span>
                                </span>
                            </div>
                            <div class="ts ts-2 d-flex align-center justify-end">
                                <XDecimals :num="item.baseTokenPriceUsd" prefix="$"></XDecimals>
                            </div>
                            <div class="ts ts-4  d-flex align-center justify-end">
                                <Arrow :up="item.priceChangeH24 > 0" :size="4" :txt="item.priceChangeH24 + '%'"></Arrow>
                            </div>
                        </div>
                    </swiper-slide>
                </swiper>
            </div>
        </div>
        <div class="car-box j-col">
            <div class="t-head d-flex align-center">
                <img src="~@/assets/down-onchain.png" class="j-img" />
                <div class="m-tip1 c-title-2">
                    <!-- 最大跌幅 -->
                    {{ $t("message.DateAlter.c") }}
                </div>
            </div>
            <div class="tds-row tds-hd d-flex justify-space-between align-center">
                <div class="ts ts-1 c-title-5">
                    <!-- 幣種 -->
                    <span class="t-tit">{{ $t("message.Rank.h") }}</span>
                </div>
                <div class="ts ts-3 c-title-5">
                    <!-- 涨跌 -->
                    {{ $t("message.Rank.oo") }}
                </div>
            </div>
            <div v-if="bigDown.length > 0">
                <swiper :modules="modules" :slides-per-view="1" :loop="true" :pagination="{ clickable: true }"
                    :autoplay="{ delay: 4500, disableOnInteraction: false }" :space-between="30"
                    @slideChange="(e) => onSlideChange(e, 'bigDown')">
                    <swiper-slide v-for="(big, bindex) in bigDown" :key="bindex">
                        <div class="tds d-flex justify-space-between align-center"
                            v-for="(item, i) in bigDown[bindex]" :key="item.key">
                            <div class="ts ts-1 d-flex align-center justify-space-between"
                                @click="onDetail(item.baseToken)">
                                <span class="c-title-4">{{ i + 1 }}</span>
                                <img :src="getImg(item.symbol)" alt="chainingview" class="j-ico seo-font"  @error="loadErr"/>
                                <span class="b-txt c-title-4">
                                    <span class="name">{{ item.name }}</span>
                                </span>
                            </div>
                            <div class="ts ts-2 d-flex align-center justify-end">
                                <XDecimals :num="item.baseTokenPriceUsd" prefix="$"></XDecimals>
                            </div>
                            <div class="ts ts-4 d-flex align-center justify-end">
                                <Arrow :up="item.priceChangeH24 > 0" :size="4" :txt="item.priceChangeH24 + '%'"></Arrow>
                            </div>
                        </div>
                    </swiper-slide>
                </swiper>
            </div>
        </div>

        <div class="car-box j-col">
            <div class="t-head d-flex align-center">
                <img src="~@/assets/deal-onchain.png" class="j-img" />
                <div class="m-tip1 c-title-2">
                    <!-- 最高交易量 -->
                    {{ $t("message.DateAlter.d") }}
                </div>
            </div>
            <div class="tds-row tds-hd d-flex justify-space-between align-center">
                <div class="ts ts-1 c-title-5">
                    <!-- 幣種 -->
                    <span class="t-tit">{{ $t("message.Rank.m") }}</span>
                </div>
                <div class="ts ts-2 c-title-5">
                    <!-- 价格 -->
                    {{ $t("message.Rank.qq") }}
                </div>
                <div class="ts ts-3 c-title-5">
                    <!-- 交易额 -->
                    {{ $t("message.Rank.pp") }}
                </div>
            </div>
            <div v-if="bigDeal.length > 0">
                <swiper :modules="modules" :slides-per-view="1" :loop="true" :pagination="{ clickable: true }"
                    :autoplay="{ delay: 3300, disableOnInteraction: false }" :space-between="30"
                    @slideChange="(e) => onSlideChange(e, 'bigDeal')">
                    <swiper-slide v-for="(big, bindex) in bigDeal" :key="bindex">
                        <div class="tds d-flex justify-space-between align-center"
                            v-for="(item, i) in bigDeal[bindex]" :key="item.key">
                            <div class="ts ts-1 d-flex align-center justify-space-between"
                                @click="onDetail(item.baseToken)">
                                <span class="c-title-4">{{ i + 1 }}</span>
                                <img :src="getImg(item.symbol)" alt="chainingview" class="j-ico seo-font"  @error="loadErr"/>
                                <span class="b-txt c-title-4">
                                    <span class="name">{{ item.name }}</span>
                                </span>
                            </div>
                            <div class="ts ts-2 d-flex align-center justify-end">
                                <XDecimals :num="item.baseTokenPriceUsd" prefix="$"></XDecimals>
                            </div>
                            <div class="ts ts-3 d-flex align-center justify-end c-title-4">
                                <!-- <Arrow :up="item.priceChangeH24 > 0" :size="4" :txt="item.priceChangeH24 + '%'"></Arrow> -->
                                ${{ formatBigNumber(item.volumeUsdH24) }}
                            </div>
                        </div>
                    </swiper-slide>
                </swiper>
            </div>
        </div>
        <div class="car-box j-col">
            <div class="t-head d-flex align-center">
                <img src="~@/assets/symbol-onchain.png" class="j-img" />
                <div class="m-tip1 c-title-2">
                    <!-- 热币榜 -->
                    {{ $t("message.DateAlter.e") }}
                </div>
            </div>
            <div class="tds-row tds-hd d-flex justify-space-between align-center">
                <div class="ts ts-1 c-title-5">
                    <!-- 幣種 -->
                    <span class="t-tit">{{ $t("message.Rank.bb") }}</span>
                </div>
                <div class="ts ts-2 c-title-5">
                    <!-- 涨跌 -->
                    {{ $t("message.Rank.oo") }}
                </div>
                <div class="ts ts-3 c-title-5">
                    <!-- 交易额 -->
                    {{ $t("message.Rank.pp") }}
                </div>
            </div>
            <div v-if="hotSymbol.length > 0">
                <swiper :modules="modules" :slides-per-view="1" :loop="true" :pagination="{ clickable: true }"
                    :autoplay="{ delay: 3400, disableOnInteraction: false }" :space-between="30"
                    @slideChange="(e) => onSlideChange(e, 'hotSymbol')">
                    <swiper-slide v-for="(big, bindex) in hotSymbol" :key="bindex">
                        <div class="tds d-flex justify-space-between align-center"
                            v-for="(item, i) in hotSymbol[bindex]" :key="item.key">
                            <div class="ts ts-1 d-flex align-center justify-space-between"
                                @click="onDetail(item.baseToken)">
                                <span class="c-title-4">{{ i + 1 }}</span>
                                <img :src="getImg(item.symbol)" alt="chainingview" class="j-ico seo-font"  @error="loadErr"/>
                                <span class="b-txt c-title-4">
                                    <span class="name">{{ item.name }}</span>
                                </span>
                            </div>
                            <div class="ts ts-2 d-flex align-center justify-end">
                                <!-- <XDecimals :num="item.baseTokenPriceUsd" prefix="$"></XDecimals> -->
                                <Arrow :up="item.priceChangeH24 > 0" :size="4" :txt="item.priceChangeH24 + '%'"></Arrow>
                            </div>
                            <div class="ts ts-3 d-flex align-center justify-end c-title-4" :title="`$${item.volumeUsdH24}`">
                                <!-- <Arrow :up="item.priceChangeH24 > 0" :size="4" :txt="item.priceChangeH24 + '%'"></Arrow> -->
                                <!-- <JNumber :num="item.volumeUsdH24" prefix="$" :origin="true" :notbold="true" price></jNumber> -->
                                ${{ formatBigNumber(item.volumeUsdH24) }}
                            </div>
                        </div>
                    </swiper-slide>
                </swiper>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import Arrow from "@/components/arrow2/index.vue";
import JNumber from "@/components/j-number/index.vue";
import XDecimals from "@/components/x-decimals/index.vue";
import { reactive, computed, onMounted, ref, onUnmounted } from "vue";
import { useRank } from "@/stores/rank";
import { formatBigNumber } from "@/comm/format";
import { useRouter } from "vue-router";
import { useTokens } from "@/stores/tokens";
import { URL_AVATAR } from "@/comm/api";
import { useKline } from "@/stores/kline";
import { commFun } from "@/views/ranks/script/comm";
import { URL_ABNORMAL_TOP_UP, URL_ABNORMAL_TOP_DOWN, URL_ABNORMAL_TOP_TURNOVER, URL_ABNORMAL_TOP_HOT } from "@/comm/api";
import { get } from "@/comm/request";
import indication from './component/indication.vue'
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Pagination, Autoplay } from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/pagination';
import 'swiper/css/autoplay';
const modules = ref<any>([Autoplay, Pagination]);
const router = useRouter();
const tokens = useTokens();
const kline = useKline();
const bigUp = ref<any>([]); //最大涨幅
const bigUpIndex = ref(0);
const bigDown = ref<any>([]); //最大跌幅
const bigDownIndex = ref(0);
const bigDeal = ref<any>([]); //最大交易量
const bigDealIndex = ref(0);
const hotSymbol = ref<any>([]) //波动
const hotSymbolIndex = ref(0)
let dealId: any
let timeId: any;
onMounted(() => {
    // timerIndex()
    getBigUp()
    getBigDown()
    getBigDeal()
    getHotSymbol()
    timerDate()
})
onUnmounted(() => {
    clearInterval(timeId)
    clearInterval(dealId)
});
function loadErr(e:any){
    e.target.src="/coin.svg"
}
function timerDate() {
    timeId = setInterval(() => {
        getBigUp()
        getBigDown()
        getHotSymbol()
    }, 40000)
    dealId = setInterval(() => {
        getBigDeal()
    }, 30000)
}
function divideDate(list: any[], length: number = 3, num: number = 3,) {
    let arr = [];
    for (let i = 0; i < list.length; i += num) {
        arr.push(list.slice(i, i + num));
    }
    return arr.slice(0, length);
}
//最大涨幅数据
async function getBigUp() {
    const res: any = await get(URL_ABNORMAL_TOP_UP, {
        periodType: "D"
    });
    if (res?.data && res?.data?.length) {
        bigUp.value = divideDate(res.data);
        // console.log('卡片 最大涨幅！！！！！！！！！！！！！！！', bigUp.value);
    }
}
//最大跌幅数据
async function getBigDown() {
    const res: any = await get(URL_ABNORMAL_TOP_DOWN, {
        periodType: "D"
    });
    if (res?.data && res?.data?.length) {
        bigDown.value = divideDate(res.data);
    }
    // console.log('卡片 最大跌幅！！！！！！！！！！！！！！！', bigDown.value);
}
//最高交易量
async function getBigDeal() {
    const res: any = await get(URL_ABNORMAL_TOP_TURNOVER, {
        periodType: "D"
    });
    if (res?.data && res?.data?.length) {
        bigDeal.value = divideDate(res.data);
    }
    // console.log('卡片 最高交易量！！！！！！！！！！！！！！！', bigDeal.value);
}
//热门币榜
async function getHotSymbol() {
    const res: any = await get(URL_ABNORMAL_TOP_HOT, {
        periodType: "D"
    });
    if (res?.data && res?.data?.length) {
        hotSymbol.value = divideDate(res.data);
    }
    // console.log('卡片 热门币榜！！！！！！！！！！！！！！', hotSymbol.value);
}
function onSwiper(e: any) {
    // console.log('onSwiper!!!', e)
}
function indexChange(e: any) {
    // console.log('index变化', e)
}
function onSlideChange(e: any, str: string) {
    if (str == 'bigUp') {
        bigUpIndex.value = e.activeIndex
    }
    if (str == 'bigDown') {
        bigDownIndex.value = e.activeIndex
    }
    if (str == 'bigDeal') {
        bigDealIndex.value = e.activeIndex
    }
    if (str == 'hotSymbol') {
        hotSymbolIndex.value = e.activeIndex
    }
}
const getImg = (str: string) => {
    return tokens.getImg(str);
};

const onJump = (str: string) => {
    console.log(str);
    localStorage.setItem("ranks", str);
    router.push("/ranks/" + str.toLowerCase());
};

const onDetail = (coin: string) => {
    // window.open("/token/" + coin);
    // router.push(`/token/${coin}`);
    window.open(`/token/${coin}`);

};
</script>

<style lang="less" scoped>
@import url("./index.less");
</style>
